// src/components/core/Product.tsx
import { Col, Row } from 'antd'
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import { getProductById } from '../../store/actions/product.action'
import { AppState } from '../../store/reducers'
import { ProductState } from '../../store/reducers/product.reducer'
import Layout from './Layout'
import ProductItem from './ProductItem'

const Product = () => {
    const dispatch = useDispatch()

    // 获取当前商品详情页路由中的商品 id
    const { productId } = useParams<{productId: string}>()

    // 获取当前商品详情
    const { product } = useSelector<AppState, ProductState>(state => state.product)

    useEffect(() => {
        // 调用 dispatch 获取数据
        dispatch(getProductById({productId}))
    }, [])
    return (
        <Layout title="商品名称" subTitle="商品描述">
            <Row gutter={36}>
                <Col span="18">
                    {/* 使用 ProductItem 显示商品详情 showViewProduct=false 关闭查看详情按钮 */}
                    <ProductItem product={product.result} showViewProduct={false} />
                </Col>
                <Col span="6">right</Col>
            </Row>
        </Layout>
    )
}

export default Product